<template>
    <div class="newsong-list">
      <el-row :gutter="24">
        <el-col :span="4"><div class="grid-content bg-purple"><p class="left">1</p></div></el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <div class="content">
                <div class="center" >
                  <div class="top">
                    <div class="photo">
                      <img :src="songinfo.blurPicUrl" alt="">
                    </div>
                    <div class="songs-name">
                        <span class="tag">{{songinfo.type}}</span>
                        <span class="name">{{songinfo.name}}</span>
                        <p>歌手:&nbsp;{{songartist.name}}</p>
                        <p>发行时间:&nbsp;{{songinfo.publishTime |timefmt('YYYY-MM-DD')}}</p>
                        <p>发行公司:&nbsp;{{songinfo.company}}</p>
                      <div class="btns">
                        <button class="play">播放</button>
                        <button class="others">收藏</button>
                        <button class="others"> 转发:{{btns.shareCount}}</button>
                        <button class="others">下载</button>
                        <button class="others">评论:{{btns.commentCount}}</button>
                      </div>
                    </div>
                  </div>
                  <div class="song-info">
                    <el-collapse >
                    <el-collapse-item title="专辑介绍:" >
                      <p>{{songinfo.description}}</p>
                    </el-collapse-item>
                  </el-collapse>
                  </div>
                  <div class="song-list">
                    <p class="list-t">包含歌曲列表<span>{{songs.length}}首歌</span></p>
                    <div class="list-h">
                      <p class="num1">1</p>
                      <p class="num2">歌曲标题</p>
                      <p class="num3">时长</p>
                      <p class="num4">歌手</p>
                    </div>
                    <ul v-for="(song,index) in songs" :key="song.id" class="list-m">
                      <li class="list-li" :class="{on:index%2==0,off:index%2!=0}">
                        <p class="num1">{{index+1}}</p>
                        <p class="num2">{{song.name}}<span style="font-size:14px;color:#ccc">{{song.alia[0]}}</span></p> 
                        <p class="num3">{{song.dt|timefmt('mm:ss')}}</p>
                        <p class="num4">{{song.ar[0].name}}</p>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
    </div>
</template>
<script>
export default {
  data: () => ({
    id:'',
    songinfo:[],
    songs:[],
    songartist:{},
    btns:{},
  }),
  created () {
    this.id = this.$route.params.id
    this.getSonginfo()
    this.getSongNew()
  },
  methods: {
    async getSonginfo (){
      try {
        const { data: { album } } = await this.Api.yrnApi.getSonginfo(this.id)
        const { data: { songs} } = await this.Api.yrnApi.getSonginfo(this.id)
        this.songinfo = album
        this.songs = songs
        this.songartist = album.artist
      } catch (error) {
        console.log('获取专辑详情失败.....')
      }
    },
    async getSongNew () {
      try {
        const {data} = await this.Api.yrnApi.getSongNew(this.id)
        this.btns = data
      } catch (error) {
        console.log('获取数据失败')
      }
    }
  }
};
</script>
<style lang="less" scoped>
  .newsong-list{
      ul,li {
      list-style: none;
    }
    .left{
      color: rgb(245, 245, 245);
    }
    .content {
      background-color: #fff;
      .center{
        margin-left: 50px;
        margin-right: 50px;
        .top{
          padding-top:50px;
          height: 200px;
          .photo{
            float: left;
            img{
              width: 180px;
              height: 180px;
            }
          }
          .songs-name{
            float: left;
            margin-left: 50px;
            .tag{
              width: 40px;
              height: 20px;
              background-color: red;
              color: #fff;
              font-size: 14px;
            }
            .name{
              margin-left:15px;
              font-size: 20px;
            }
            p{
              font-size: 12px;
              margin:5px  0px;
            }
            .btns{
              .play{
                width: 60px;
                height: 30px;
                background-color: skyblue;
                border-radius: 5px;
                color: #fff;
              }
              .others {
                width: 60px;
                height: 30px;
                margin-left:5px;
              }
            }
          }
        }
        .song-list{
          margin-top:20px;
          .list-t{
            font-size: 20px;
            border-bottom: 2px solid rgb(194,12,12);
            span{
              margin-left: 20px;
              font-size: 14px;
              color: #ccc;
            }
          }
          .list-h{
            height:35px;
            background-color: rgb(243,243,243);
            font-size: 14px;
            line-height: 35px;
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            .num1{
              border-left: 1px solid #ccc;
              float: left;
              width: 75px;
              color: rgb(243,243,243);
            }
           .num2{
              border-left: 1px solid #ccc;
              float: left;
              width: 345px
            }
            .num3{
              border-left: 1px solid #ccc;
              float: left;
              width: 90px
            }
            .num4{
              border-left: 1px solid #ccc;
              float: left;
              width: 75px
            }
          }
          .list-m{
            border:1px solid rgb(243,243,243);;
            .on{
              background-color: #fff;
            }
            .off{
              background-color: rgb(243,243,243);
            }
            .list-li{
              height: 30px;
            .num1{
              float: left;
              width: 75px;
            }
           .num2 {
              float: left;
              width: 345px
            }
            .num3{
              float: left;
              width: 90px
            }
            .num4{
              float: left;
              width: 75px
            }
            }
          }
        }
      }
    }
  }
</style>